<!-- 新增普通/复杂班次设置 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="(form.id ? '编辑' : '新增') + `班次`"
        showBack
      ></pageHeaderNew>
    </template>
    <div class="wrap">
      <main>
        <a-form
          style="width: 60%; margin: 0 auto"
          :model="form"
          auto-label-width
        >
          <a-form-item field="type" label="班次类型" required>
            <a-radio-group
              @change="changeType($event as number)"
              v-model="form.type"
              :default-value="1"
            >
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <a-space
                    align="start"
                    class="custom-radio-card"
                    :class="{ 'custom-radio-card-checked': checked }"
                  >
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot" />
                    </div>
                    <div>
                      <div className="custom-radio-card-title">单班次</div>
                    </div>
                  </a-space>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <a-space
                    align="start"
                    class="custom-radio-card"
                    :class="{ 'custom-radio-card-checked': checked }"
                  >
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot" />
                    </div>
                    <div>
                      <div className="custom-radio-card-title">两班次</div>
                    </div>
                  </a-space>
                </template>
              </a-radio>
              <a-radio :value="3">
                <template #radio="{ checked }">
                  <a-space
                    align="start"
                    class="custom-radio-card"
                    :class="{ 'custom-radio-card-checked': checked }"
                  >
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot" />
                    </div>
                    <div>
                      <div className="custom-radio-card-title">三班次</div>
                    </div>
                  </a-space>
                </template>
              </a-radio>
              <a-radio :value="4">
                <template #radio="{ checked }">
                  <a-space
                    align="start"
                    class="custom-radio-card"
                    :class="{ 'custom-radio-card-checked': checked }"
                  >
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot" />
                    </div>
                    <div>
                      <div className="custom-radio-card-title">多班次</div>
                    </div>
                  </a-space>
                </template>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item field="type" label="班次名称" required>
            <template v-if="form.type === 1">
              <a-input
                @change="changeName"
                placeholder="请输入"
                v-model="form.attendanceClassesSetting[0].name"
              ></a-input>
            </template>
            <template v-else>
              <a-input placeholder="请输入" v-model="form.name"></a-input>
            </template>
          </a-form-item>
          <a-form-item
            v-if="form.type === 1"
            field="attendanceClassesSetting[0].shortName"
            label="班次简称"
            required
          >
            <a-input
              placeholder="请输入"
              v-model="form.attendanceClassesSetting[0].shortName"
            />
          </a-form-item>
          <a-form-item
            v-if="form.type === 1"
            field="color"
            label="班次颜色"
            required
          >
            <pick-colors
              v-model:value="form.attendanceClassesSetting[0].color"
              style="cursor: pointer"
              :zIndex="9999"
            />
          </a-form-item>
          <a-form-item field="responsibleUserId" label="班次负责人" required>
            <div @click="isShow" style="width: 100%">
              <a-input v-model="personnelName" type="text" />
            </div>
          </a-form-item>
        </a-form>
        <header>
          <h2 style="font-size: 16px">上下班设置</h2>
        </header>
        <div style="width: 100%; padding: 0 10px">
          <a-steps
            :current="form.attendanceClassesSetting.length + 1"
            type="dot"
            direction="vertical"
          >
            <template v-if="form.type === 1">
              <a-step style="margin-bottom: 10px">
                <div style="border: 1px solid #f2f2f2; border-radius: 10px">
                  <a-row class="grid-title">
                    <a-col :span="8">
                      <div>上班时间</div>
                    </a-col>
                    <a-col :span="8">
                      <div>有效打卡时间</div>
                    </a-col>
                    <a-col :span="8">
                      <div>人性化考勤</div>
                    </a-col>
                  </a-row>
                  <template
                    v-for="(item, index) in form.attendanceClassesSetting[0]
                      .commutingTime"
                    :key="item"
                  >
                    <a-row class="grid-edit">
                      <a-col :span="8">
                        <div>
                          <a-button
                            @click="addCommutingTime(1)"
                            type="outline"
                            style="margin-right: 10px"
                          >
                            <template #icon>
                              <icon-plus />
                            </template>
                            <template #default>增加时间段</template>
                          </a-button>
                          <a-button
                            @click="delCommutingTime(1, index)"
                            v-if="index"
                            type="dashed"
                          >
                            <template #icon>
                              <icon-delete />
                            </template>
                            <template #default>删除</template>
                          </a-button>
                        </div>
                      </a-col>
                      <a-col :span="8"> </a-col>
                      <a-col :span="8">
                        <div>
                          打卡规则：
                          <a-select
                            v-model="item.rule"
                            style="width: 200px"
                            placeholder="请选择"
                          >
                            <a-option :value="1">上下班均需打卡</a-option>
                            <a-option :value="2">仅上班打卡</a-option>
                            <a-option :value="3">仅下班打卡</a-option>
                            <!-- <a-option :value="4">
                              上班或下班打卡一次即可
                            </a-option>
                            <a-option :value="5">上下班无需打卡</a-option> -->
                          </a-select>
                        </div>
                      </a-col>
                    </a-row>
                    <a-row class="grid-edit-main">
                      <a-col :span="8">
                        <div>
                          上班时间：
                          <a-time-picker
                            v-model="item.workingTime"
                            format="HH:mm"
                            style="width: 150px"
                          />
                        </div>
                      </a-col>
                      <a-col :span="8">
                        <div>
                          有效打卡时段：
                          <a-time-picker
                            v-model="item.workingTimeClockInStart"
                            format="HH:mm"
                            style="width: 150px"
                          />
                          -
                          <a-time-picker
                            v-model="item.workingTimeClockInEnd"
                            format="HH:mm"
                            style="width: 150px"
                          />
                        </div>
                      </a-col>
                      <a-col :span="8">
                        <div>
                          允许延迟
                          <a-input-number
                            v-model="item.workingTimeBeLate"
                            :min="0"
                            hide-button
                            style="width: 50px"
                          ></a-input-number>
                          分钟，不记迟到
                        </div>
                      </a-col>
                    </a-row>
                    <a-row class="grid-edit-main">
                      <a-col :span="8">
                        <div>
                          下班时间：
                          <a-time-picker
                            v-model="item.afterWorkTime"
                            format="HH:mm"
                            style="width: 150px"
                          />
                        </div>
                      </a-col>
                      <a-col :span="8">
                        <div>
                          有效打卡时段：
                          <a-time-picker
                            v-model="item.afterWorkTimeClockInStart"
                            format="HH:mm"
                            style="width: 150px"
                          />
                          -
                          <a-time-picker
                            v-model="item.afterWorkTimeClockInEnd"
                            format="HH:mm"
                            style="width: 150px"
                          />
                        </div>
                      </a-col>
                      <a-col :span="8">
                        <div>
                          允许提前
                          <a-input-number
                            :min="0"
                            v-model="item.afterWorkTimeForward"
                            hide-button
                            style="width: 50px"
                          ></a-input-number>
                          分钟，不记早退
                        </div>
                      </a-col>
                    </a-row>
                    <a-row
                      class="grid-edit-main"
                      style="border-bottom: 1px solid #f2f2f2"
                    >
                      <a-col :span="8">
                        <a-checkbox
                          :default-checked="item.isBreakTime === 1"
                          @change="changeBreakTime($event as boolean, item)"
                          :value="1"
                          >休息时间：
                        </a-checkbox>
                        <a-space v-if="item.isBreakTime === 1">
                          <a-time-picker
                            v-model="item.restTimeStart"
                            format="HH:mm"
                            style="width: 150px"
                          />
                          -
                          <a-time-picker
                            v-model="item.restTimeEnd"
                            format="HH:mm"
                            style="width: 150px"
                          />
                        </a-space>
                      </a-col>
                      <a-col :span="8"> </a-col>
                      <a-col :span="8"> </a-col>
                    </a-row>
                  </template>
                  <!-- <a-space
                    style="
                      display: flex;
                      justify-content: center;
                      padding: 10px;
                      border-bottom: 1px solid #f2f2f2;
                    "
                  >
                    最晚可打 加班卡：
                    <a-space>
                      <a-select
                        v-model="
                          form.attendanceClassesSetting[0].latestClockIn
                            .clockInDay
                        "
                      >
                        <a-option :value="0">今日</a-option>
                        <a-option :value="1">次日</a-option>
                      </a-select>
                      <a-time-picker
                        v-model="
                          form.attendanceClassesSetting[0].latestClockIn
                            .clockInTime
                        "
                        format="HH:mm"
                        style="width: 150px"
                      />
                    </a-space>
                    <a-checkbox>加班前休息时长 </a-checkbox>
                    <a-input-number
                      :precision="2"
                      :step="0.5"
                      :min="0"
                      v-model="
                        form.attendanceClassesSetting[0].latestClockIn.restTime
                      "
                      style="width: 100px"
                    ></a-input-number>
                  </a-space> -->
                  <a-space
                    style="display: flex; font-size: 14px; padding: 10px"
                  >
                    <div style="margin-right: 100px">
                      合计每天出勤时长：约
                      <span style="color: #409eff">{{
                        allTime(form.attendanceClassesSetting[0])
                      }}</span>
                      个小时
                    </div>
                    <div>
                      考勤标准时长：
                      <a-input-number
                        v-model="
                          form.attendanceClassesSetting[0].attendanceTime
                        "
                        :min="0"
                        style="width: 150px"
                      ></a-input-number>
                      小时/天
                      <span>用于请假天数，请假小时数之间的折算 </span>
                    </div>
                  </a-space>
                </div>
              </a-step>
            </template>
            <template v-else>
              <template
                v-for="(item, index) in form.attendanceClassesSetting"
                :key="item"
              >
                <a-step>
                  <div
                    style="
                      border: 1px solid #f2f2f2;
                      border-radius: 10px;
                      margin-bottom: 10px;
                    "
                  >
                    <a-space
                      style="
                        display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        background-color: #fdfdfd;
                      "
                    >
                      <a-space>
                        班次名称：
                        <a-input
                          placeholder="请输入"
                          v-model="item.name"
                        ></a-input>
                        班次简称：
                        <a-input
                          placeholder="请输入"
                          v-model="item.shortName"
                        ></a-input>
                        班次颜色：
                        <pick-colors
                          v-model:value="item.color"
                          style="cursor: pointer"
                          :zIndex="9999"
                        />
                      </a-space>
                      <a-space>
                        <a-button
                          v-if="form.type === 4"
                          type="outline"
                          style="margin-right: 10px"
                          @click="addAttendanceClassesSetting"
                        >
                          <template #icon>
                            <icon-plus />
                          </template>
                          <!-- Use the default slot to avoid extra spaces -->
                          <template #default>新增班次</template>
                        </a-button>
                        <a-button
                          @click="delAttendanceClassesSetting(index)"
                          v-if="form.type === 4 && index"
                          type="dashed"
                        >
                          <template #icon>
                            <icon-delete />
                          </template>
                          <!-- Use the default slot to avoid extra spaces -->
                          <template #default>删除</template>
                        </a-button>
                      </a-space>
                    </a-space>
                    <a-row class="grid-title">
                      <a-col :span="8">
                        <div>上班时间</div>
                      </a-col>
                      <a-col :span="8">
                        <div>有效打卡时间</div>
                      </a-col>
                      <a-col :span="8">
                        <div>人性化考勤</div>
                      </a-col>
                    </a-row>
                    <template
                      v-for="(ele, ind) in item.commutingTime"
                      :key="ele"
                    >
                      <a-row class="grid-edit">
                        <a-col :span="8">
                          <div>
                            <a-button
                              @click="addCommutingTime(1, index)"
                              type="outline"
                              style="margin-right: 10px"
                            >
                              <template #icon>
                                <icon-plus />
                              </template>
                              <!-- Use the default slot to avoid extra spaces -->
                              <template #default>增加时间段</template>
                            </a-button>
                            <a-button
                              @click="delCommutingTime(2, ind, index)"
                              v-if="ind"
                              type="dashed"
                            >
                              <template #icon>
                                <icon-delete />
                              </template>
                              <!-- Use the default slot to avoid extra spaces -->
                              <template #default>删除</template>
                            </a-button>
                          </div>
                        </a-col>

                        <a-col :span="8">
                          <!-- <div>有效打卡时间</div> -->
                        </a-col>
                        <a-col :span="8">
                          <div>
                            打卡规则：
                            <!-- v-model="
                            form.attendanceClassesSetting[0].commutingTime[0]
                              .rule
                          " -->
                            <a-select
                              v-model="ele.rule"
                              style="width: 200px"
                              placeholder="请选择"
                            >
                              <a-option :value="1">上下班均需打卡</a-option>
                              <a-option :value="2">仅上班打卡</a-option>
                              <a-option :value="3">仅下班打卡</a-option>
                              <!-- <a-option :value="4">
                                上班或下班打卡一次即可
                              </a-option>
                              <a-option :value="5">上下班无需打卡</a-option> -->
                            </a-select>
                          </div>
                        </a-col>
                      </a-row>
                      <a-row class="grid-edit-main">
                        <a-col :span="8">
                          <div>
                            上班时间：
                            <a-time-picker
                              v-model="ele.workingTime"
                              format="HH:mm"
                              style="width: 150px"
                            />
                          </div>
                        </a-col>

                        <a-col :span="8">
                          <div>
                            有效打卡时段：
                            <a-time-picker
                              v-model="ele.workingTimeClockInStart"
                              format="HH:mm"
                              style="width: 150px"
                            />
                            -
                            <a-time-picker
                              v-model="ele.workingTimeClockInEnd"
                              format="HH:mm"
                              style="width: 150px"
                            />
                          </div>
                        </a-col>
                        <a-col :span="8">
                          <div>
                            允许延迟
                            <a-input-number
                              v-model="ele.workingTimeBeLate"
                              :min="0"
                              hide-button
                              style="width: 50px"
                            ></a-input-number>
                            分钟，不记迟到
                          </div>
                        </a-col>
                      </a-row>
                      <a-row class="grid-edit-main">
                        <a-col :span="8">
                          <div>
                            下班时间：
                            <a-time-picker
                              v-model="ele.afterWorkTime"
                              format="HH:mm"
                              style="width: 150px"
                            />
                          </div>
                        </a-col>

                        <a-col :span="8">
                          <div>
                            有效打卡时段：
                            <a-time-picker
                              v-model="ele.afterWorkTimeClockInStart"
                              format="HH:mm"
                              style="width: 150px"
                            />
                            -
                            <a-time-picker
                              v-model="ele.afterWorkTimeClockInEnd"
                              format="HH:mm"
                              style="width: 150px"
                            />
                          </div>
                        </a-col>
                        <a-col :span="8">
                          <div>
                            允许提前
                            <a-input-number
                              :min="0"
                              v-model="ele.afterWorkTimeForward"
                              hide-button
                              style="width: 50px"
                            ></a-input-number>
                            分钟，不记早退
                          </div>
                        </a-col>
                      </a-row>
                      <a-row
                        class="grid-edit-main"
                        style="border-bottom: 1px solid #f2f2f2"
                      >
                        <a-col :span="8">
                          <a-checkbox
                            :default-checked="ele.isBreakTime === 1"
                            @change="changeBreakTime($event as boolean, ele)"
                            :value="1"
                            >休息时间：
                          </a-checkbox>
                          <a-space v-if="ele.isBreakTime === 1">
                            <a-time-picker
                              v-model="ele.restTimeStart"
                              format="HH:mm"
                              style="width: 150px"
                            />
                            -
                            <a-time-picker
                              v-model="ele.restTimeEnd"
                              format="HH:mm"
                              style="width: 150px"
                            />
                          </a-space>
                        </a-col>

                        <a-col :span="8"> </a-col>
                        <a-col :span="8"> </a-col>
                      </a-row>
                    </template>
                    <!-- <a-space
                      style="
                        display: flex;
                        justify-content: center;
                        padding: 10px;
                        border-bottom: 1px solid #f2f2f2;
                      "
                    >
                      最晚可打 加班卡： 次日
                      <a-space>
                        <a-select v-model="item.latestClockIn.clockInDay">
                          <a-option :value="0">今日</a-option>
                          <a-option :value="1">次日</a-option>
                        </a-select>
                        <a-time-picker
                          v-model="item.latestClockIn.clockInTime"
                          format="HH:mm"
                          style="width: 150px"
                        />
                      </a-space>
                      <a-checkbox>加班前休息时长 </a-checkbox>
                      <a-input-number
                        :precision="2"
                        :step="0.5"
                        :min="0"
                        v-model="item.latestClockIn.restTime"
                        style="width: 100px"
                      ></a-input-number>
                    </a-space> -->
                    <a-space
                      style="
                        display: flex;
                        /* justify-content: center; */
                        font-size: 14px;
                        padding: 10px;
                      "
                    >
                      <div style="margin-right: 100px">
                        合计每天出勤时长：约
                        <span style="color: #409eff">{{ allTime(item) }}</span>
                        个小时
                      </div>
                      <div>
                        考勤标准时长：
                        <a-input-number
                          v-model="item.attendanceTime"
                          :min="0"
                          style="width: 100px"
                        ></a-input-number>
                        小时/天
                        <span>用于请假天数，请假小时数之间的折算 </span>
                      </div>
                    </a-space>
                  </div>
                </a-step>
              </template>
            </template>
            <a-step>
              合计每天班次时长：约
              <span style="color: #409eff">
                {{
                  form.type === 1
                    ? allTime(form.attendanceClassesSetting[0])
                    : dayAllTime()
                }}
              </span>
              个小时
            </a-step>
          </a-steps>
        </div>
      </main>
      <footer>
        <a-button
          class="btn"
          style="
            margin-right: 20px;
            border: 1px rgba(242, 242, 242, 1) solid;
            background-color: #fff;
          "
          @click="$router.go(-1)"
        >
          返回
        </a-button>
        <a-button class="btn" type="primary" @click="save">保存</a-button>
      </footer>
    </div>
  </ContentCard>
  <OrganizationPersonnel
    ref="organizationPersonnel"
    :selected-ids="form.responsibleUserId"
    @changePersonnel="changePersonnel"
  />
</template>

<script lang="ts" setup>
import PickColors from 'vue-pick-colors';
import OrganizationPersonnel from '@/components/OrganizationPersonnel/index.vue';
import { Message } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash';
import {
  PostClassesManage,
  PutClassesManage
} from '@/apis/attendance/base-setting/index';

const router = useRouter();
const form: any = reactive({
  type: 1,
  responsibleUserId: [],
  attendanceClassesSetting: [
    {
      name: '',
      shortName: '',
      color: '',
      attendanceTime: 0,

      latestClockIn: {
        clockInDay: 0,
        clockInTime: null,
        restTime: 0
      },
      commutingTime: [
        {
          rule: 1,
          isBreakTime: 1,
          restTimeStart: '',
          restTimeEnd: '',
          workingTime: '',
          workingTimeClockInStart: '',
          workingTimeClockInEnd: '',
          workingTimeBeLate: 0,
          afterWorkTime: '',
          afterWorkTimeClockInStart: '',
          afterWorkTimeClockInEnd: '',
          afterWorkTimeForward: 0
        },
        {
          rule: 1,
          restTimeStart: '',
          restTimeEnd: '',
          workingTime: '',
          workingTimeClockInStart: '',
          workingTimeClockInEnd: '',
          workingTimeBeLate: 0,
          afterWorkTime: '',
          afterWorkTimeClockInStart: '',
          afterWorkTimeClockInEnd: '',
          afterWorkTimeForward: 0
        }
      ]
    }
  ]
});

const changeType = (val: number) => {
  if (val === 1) {
    form.attendanceClassesSetting = [
      {
        name: '',
        shortName: '',
        color: '',
        attendanceTime: 0,
        latestClockIn: {
          clockInDay: 0,
          clockInTime: null,
          restTime: 0
        },
        commutingTime: [
          {
            rule: 1,
            isBreakTime: 1,
            restTimeStart: '',
            restTimeEnd: '',
            workingTime: '',
            workingTimeClockInStart: '',
            workingTimeClockInEnd: '',
            workingTimeBeLate: 0,
            afterWorkTime: '',
            afterWorkTimeClockInStart: '',
            afterWorkTimeClockInEnd: '',
            afterWorkTimeForward: 0
          }
        ]
      }
    ];
  } else if (val === 2) {
    form.attendanceClassesSetting = [
      {
        name: '',
        shortName: '',
        color: '',
        attendanceTime: 0,

        latestClockIn: {
          clockInDay: 0,
          clockInTime: null,
          restTime: 0
        },
        commutingTime: [
          {
            rule: 1,
            isBreakTime: 1,
            restTimeStart: '',
            restTimeEnd: '',
            workingTime: '',
            workingTimeClockInStart: '',
            workingTimeClockInEnd: '',
            workingTimeBeLate: 0,
            afterWorkTime: '',
            afterWorkTimeClockInStart: '',
            afterWorkTimeClockInEnd: '',
            afterWorkTimeForward: 0
          }
        ]
      },
      {
        name: '',
        shortName: '',
        color: '',
        attendanceTime: 0,

        latestClockIn: {
          clockInDay: 0,
          clockInTime: null,
          restTime: 0
        },
        commutingTime: [
          {
            rule: 1,
            isBreakTime: 1,
            restTimeStart: '',
            restTimeEnd: '',
            workingTime: '',
            workingTimeClockInStart: '',
            workingTimeClockInEnd: '',
            workingTimeBeLate: 0,
            afterWorkTime: '',
            afterWorkTimeClockInStart: '',
            afterWorkTimeClockInEnd: '',
            afterWorkTimeForward: 0
          }
        ]
      }
    ];
  } else if (val === 3) {
    form.attendanceClassesSetting = [
      {
        name: '',
        shortName: '',
        color: '',
        attendanceTime: 0,

        latestClockIn: {
          clockInDay: 0,
          clockInTime: null,
          restTime: 0
        },
        commutingTime: [
          {
            rule: 1,
            isBreakTime: 1,
            restTimeStart: '',
            restTimeEnd: '',
            workingTime: '',
            workingTimeClockInStart: '',
            workingTimeClockInEnd: '',
            workingTimeBeLate: 0,
            afterWorkTime: '',
            afterWorkTimeClockInStart: '',
            afterWorkTimeClockInEnd: '',
            afterWorkTimeForward: 0
          }
        ]
      },
      {
        name: '',
        shortName: '',
        color: '',
        attendanceTime: 0,

        latestClockIn: {
          clockInDay: 0,
          clockInTime: null,
          restTime: 0
        },
        commutingTime: [
          {
            rule: 1,
            isBreakTime: 1,
            restTimeStart: '',
            restTimeEnd: '',
            workingTime: '',
            workingTimeClockInStart: '',
            workingTimeClockInEnd: '',
            workingTimeBeLate: 0,
            afterWorkTime: '',
            afterWorkTimeClockInStart: '',
            afterWorkTimeClockInEnd: '',
            afterWorkTimeForward: 0
          }
        ]
      },
      {
        name: '',
        shortName: '',
        color: '',
        attendanceTime: 0,

        latestClockIn: {
          clockInDay: 0,
          clockInTime: null,
          restTime: 0
        },
        commutingTime: [
          {
            rule: 1,
            isBreakTime: 1,
            restTimeStart: '',
            restTimeEnd: '',
            workingTime: '',
            workingTimeClockInStart: '',
            workingTimeClockInEnd: '',
            workingTimeBeLate: 0,
            afterWorkTime: '',
            afterWorkTimeClockInStart: '',
            afterWorkTimeClockInEnd: '',
            afterWorkTimeForward: 0
          }
        ]
      }
    ];
  } else if (val === 4) {
    form.attendanceClassesSetting = [
      {
        name: '',
        shortName: '',
        color: '',
        attendanceTime: 0,

        latestClockIn: {
          clockInDay: 0,
          clockInTime: null,
          restTime: 0
        },
        commutingTime: [
          {
            rule: 1,
            isBreakTime: 1,
            restTimeStart: '',
            restTimeEnd: '',
            workingTime: '',
            workingTimeClockInStart: '',
            workingTimeClockInEnd: '',
            workingTimeBeLate: 0,
            afterWorkTime: '',
            afterWorkTimeClockInStart: '',
            afterWorkTimeClockInEnd: '',
            afterWorkTimeForward: 0
          }
        ]
      },
      {
        name: '',
        shortName: '',
        color: '',
        attendanceTime: 0,

        latestClockIn: {
          clockInDay: 0,
          clockInTime: null,
          restTime: 0
        },
        commutingTime: [
          {
            rule: 1,
            isBreakTime: 1,
            restTimeStart: '',
            restTimeEnd: '',
            workingTime: '',
            workingTimeClockInStart: '',
            workingTimeClockInEnd: '',
            workingTimeBeLate: 0,
            afterWorkTime: '',
            afterWorkTimeClockInStart: '',
            afterWorkTimeClockInEnd: '',
            afterWorkTimeForward: 0
          }
        ]
      },
      {
        name: '',
        shortName: '',
        color: '',
        attendanceTime: 0,

        latestClockIn: {
          clockInDay: 0,
          clockInTime: null,
          restTime: 0
        },
        commutingTime: [
          {
            rule: 1,
            isBreakTime: 1,
            restTimeStart: '',
            restTimeEnd: '',
            workingTime: '',
            workingTimeClockInStart: '',
            workingTimeClockInEnd: '',
            workingTimeBeLate: 0,
            afterWorkTime: '',
            afterWorkTimeClockInStart: '',
            afterWorkTimeClockInEnd: '',
            afterWorkTimeForward: 0
          }
        ]
      },
      {
        name: '',
        shortName: '',
        color: '',
        attendanceTime: 0,

        latestClockIn: {
          clockInDay: 0,
          clockInTime: null,
          restTime: 0
        },
        commutingTime: [
          {
            rule: 1,
            isBreakTime: 1,
            restTimeStart: '',
            restTimeEnd: '',
            workingTime: '',
            workingTimeClockInStart: '',
            workingTimeClockInEnd: '',
            workingTimeBeLate: 0,
            afterWorkTime: '',
            afterWorkTimeClockInStart: '',
            afterWorkTimeClockInEnd: '',
            afterWorkTimeForward: 0
          }
        ]
      }
    ];
  }
};

const organizationPersonnel = ref();
const personnelName = ref('');

const isShow = () => {
  organizationPersonnel.value.show();
};

const changePersonnel = (data: any) => {
  form.responsibleUserId = data.ids;
  personnelName.value = data.data.map(({ name }: any) => name).join(',');
};
const changeBreakTime = (type: boolean, data: any) => {
  if (type) {
    data.isBreakTime = 1;
  } else {
    data.isBreakTime = 2;
  }
};
const addCommutingTime = (type: 1 | 2, index?: number) => {
  if (type === 1) {
    form.attendanceClassesSetting[0].commutingTime.push({
      rule: 0,
      isBreakTime: 1,
      restTimeStart: '',
      restTimeEnd: '',
      workingTime: '',
      workingTimeClockInStart: '',
      workingTimeClockInEnd: '',
      workingTimeBeLate: 0,
      afterWorkTime: '',
      afterWorkTimeClockInStart: '',
      afterWorkTimeClockInEnd: '',
      afterWorkTimeForward: 0
    });
  } else {
    if (!index) return Message.error('出错了');
    form.attendanceClassesSetting[index].commutingTime.push({
      rule: 0,
      isBreakTime: 1,
      restTimeStart: '',
      restTimeEnd: '',
      workingTime: '',
      workingTimeClockInStart: '',
      workingTimeClockInEnd: '',
      workingTimeBeLate: 0,
      afterWorkTime: '',
      afterWorkTimeClockInStart: '',
      afterWorkTimeClockInEnd: '',
      afterWorkTimeForward: 0
    });
  }
};
const delCommutingTime = (type: 1 | 2, index: number, ind?: number) => {
  if (type === 1) {
    form.attendanceClassesSetting[0].commutingTime.splice(index, 1);
  } else {
    if (ind) form.attendanceClassesSetting[ind].commutingTime.splice(index, 1);
  }
};
const addAttendanceClassesSetting = () => {
  form.attendanceClassesSetting.push({
    name: '',
    shortName: '',
    color: '',
    attendanceTime: 0,

    latestClockIn: {
      clockInDay: 0,
      clockInTime: null,
      restTime: 0
    },
    commutingTime: [
      {
        rule: 1,
        isBreakTime: 1,
        restTimeStart: '',
        restTimeEnd: '',
        workingTime: '',
        workingTimeClockInStart: '',
        workingTimeClockInEnd: '',
        workingTimeBeLate: 0,
        afterWorkTime: '',
        afterWorkTimeClockInStart: '',
        afterWorkTimeClockInEnd: '',
        afterWorkTimeForward: 0
      },
      {
        rule: 1,
        restTimeStart: '',
        restTimeEnd: '',
        workingTime: '',
        workingTimeClockInStart: '',
        workingTimeClockInEnd: '',
        workingTimeBeLate: 0,
        afterWorkTime: '',
        afterWorkTimeClockInStart: '',
        afterWorkTimeClockInEnd: '',
        afterWorkTimeForward: 0
      }
    ]
  });
};
const delAttendanceClassesSetting = (index: number) => {
  form.attendanceClassesSetting.splice(index, 1);
};
const save = async () => {
  if (form.id) {
    await PutClassesManage(form);
  } else {
    await PostClassesManage(form);
  }
  router.back();
};
function calculateHourDifference(startTime = '00:00', endTime = '00:00') {
  const start = +new Date(`2000-01-01 ${startTime}`);
  const end = +new Date(`2000-01-01 ${endTime}`);
  const hourDifference = Math.abs(end - start) / 36e5; // 36e5 是一个小时的毫秒数
  return hourDifference;
}

const allTime = (data: any) => {
  let num = 0;
  data.commutingTime.forEach((ele: any) => {
    num += calculateHourDifference(
      ele.workingTime || '00:00',
      ele.afterWorkTime || '00:00'
    );
    num -= calculateHourDifference(
      ele.restTimeStart || '00:00',
      ele.restTimeEnd || '00:00'
    );
  });
  return num;
};
const dayAllTime = () => {
  let num = 0;
  form.attendanceClassesSetting.forEach((ele: any) => {
    num += allTime(ele);
  });
  return num;
};

const changeName = (e) => {
  form.name = e;
};

onMounted(() => {
  Object.assign(form, JSON.parse(localStorage.getItem('classSetting') + ''));
});
onUnmounted(() => {
  localStorage.removeItem('classSetting');
});
</script>

<style lang="less" scoped>
.wrap {
  main {
    margin-bottom: 60px;
    overflow: hidden;

    header {
    }
    header h2 {
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #f2f2f2;
    }
    header h2::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 30px;
      background-color: #165dff;
      margin-right: 10px;
    }
    .custom-radio-card {
      padding: 10px 16px;
      border: 1px solid var(--color-border-2);
      margin-bottom: 10px;
      border-radius: 4px;
      width: 100px;
      height: 50px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .custom-radio-card-mask {
      height: 14px;
      width: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
      border: 1px solid var(--color-border-2);
      box-sizing: border-box;
    }

    .custom-radio-card-mask-dot {
      width: 8px;
      height: 8px;
      border-radius: 100%;
    }

    .custom-radio-card-title {
      color: var(--color-text-1);
      font-size: 14px;
      font-weight: bold;
      // margin-bottom: 8px;
    }

    .custom-radio-card:hover,
    .custom-radio-card-checked,
    .custom-radio-card:hover .custom-radio-card-mask,
    .custom-radio-card-checked .custom-radio-card-mask {
      border-color: rgb(var(--primary-6));
    }

    .custom-radio-card:hover .custom-radio-card-title,
    .custom-radio-card-checked .custom-radio-card-title,
    .custom-radio-card-checked .custom-radio-card-tips {
      color: rgb(var(--primary-6));
    }

    .custom-radio-card-checked .custom-radio-card-mask-dot {
      background-color: rgb(var(--primary-6));
    }

    .row-box {
      box-sizing: content-box;
      width: 800px;
      height: 255px;
      box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.349019607843137);
      border-radius: 8px;

      &-header {
        height: 49px;
        background-color: rgba(224, 236, 255, 0.188235294117647);
        display: flex;
        align-items: center;
        div {
          position: relative;
          left: 15px;
        }
      }

      &-content {
        height: calc(100% - 49px);
        padding: 10px 20px;
        display: flex;
        align-items: center;
      }
    }
  }

  footer {
    height: 60px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
  :deep(.arco-table-th),
  :deep(.arco-table-td) {
    height: 60px;
  }
}
.grid-title {
  background: #f9fbff;
  padding: 10px;
  font-size: 15px;
  border-bottom: 1px solid #f2f2f2;
  div {
    // text-align: center;
  }
}
.grid-edit {
  // background: #f9fbff;
  // font-size: 15px;
  padding: 10px;
  border-bottom: 1px solid #f2f2f2;
}
.grid-edit-main {
  padding: 10px;
  font-size: 14px;
}

:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
.custom-radio-card {
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 100x;
  box-sizing: border-box;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  // margin-bottom: 8px;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
:deep(.arco-steps-item) {
  display: flex;
  .arco-steps-item-content {
    flex: 1;
    .arco-steps-item-title {
      margin: 0 20px;
      width: 100%;
    }
  }
}
</style>
